<template>
  <div class="details-view">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="工单详情"
        left-arrow
        @click-left="onClickLeft"
    />

    <!-- 工单信息 -->
    <div class="ticket-list">
      <div v-for="ticket in detail" :key="ticket.id" class="ticket-item">
        <div class="ticket-header">
          <div class="ticket-id">编号：{{ ticket.id }}</div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            工单类型:
            <span v-if="ticket.shippingtype==0">即时运送工单</span>
            <span v-if="ticket.shippingtype==1">预约运送工单</span>
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            上报人: {{ticket.ticketname}}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            联系电话: {{ticket.ticketphone}}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            生成时间:{{ticket.shippinggenerationtime}}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            开始时间:{{ticket.shippingstarttime}}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            结束时间:{{ticket.shippingfinishtime}}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            需要运送人员人数:{{ticket.shippingnumber}}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            实际执行人:{{ticket.ticketoperator}}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            处理时限:{{ticket.shippinglimit}}小时
          </div>
        </div>
      </div>
    </div>
<!--    &lt;!&ndash; 标签页 &ndash;&gt;-->
<!--    <van-tabs v-model="activeTab" sticky>-->
<!--      <van-tab title="保洁内容">-->
<!--        <div class="content-section">-->
<!--          <div class="info-row">-->
<!--            <span class="label">起始科室：</span>-->
<!--            <span class="value">{{ cleaningContent.startDepartment }}</span> &lt;!&ndash; Updated to use cleaningContent &ndash;&gt;-->
<!--          </div>-->
<!--          <div class="info-row">-->
<!--            <span class="label">目标科室：</span>-->
<!--            <span class="value">{{ cleaningContent.targetDepartment }}</span> &lt;!&ndash; Updated to use cleaningContent &ndash;&gt;-->
<!--          </div>-->
<!--          <div class="info-row">-->
<!--            <span class="label">运送场景：</span>-->
<!--            <span class="value">{{ cleaningContent.scene }}</span> &lt;!&ndash; Updated to use cleaningContent &ndash;&gt;-->
<!--          </div>-->
<!--          <div class="info-row">-->
<!--            <span class="label">运送工具：</span>-->
<!--            <span class="value">{{ cleaningContent.tools }}</span> &lt;!&ndash; Updated to use cleaningContent &ndash;&gt;-->
<!--          </div>-->
<!--          <div class="info-row">-->
<!--            <span class="label">任务描述：</span>-->
<!--            <span class="value">{{ cleaningContent.description }}</span> &lt;!&ndash; Updated to use cleaningContent &ndash;&gt;-->
<!--          </div>-->
<!--          <div class="info-row">-->
<!--            <span class="label">备注：</span>-->
<!--            <span class="value">{{ cleaningContent.remarks }}</span> &lt;!&ndash; Updated to use cleaningContent &ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
<!--      </van-tab>-->
<!--      <van-tab title="工单日志">-->
<!--        <div class="log-section">-->
<!--          <van-steps direction="vertical" :active="0">-->
<!--            &lt;!&ndash; 处理记录 &ndash;&gt;-->
<!--            <van-step v-if="details.handleone">-->
<!--              <h5>{{ details.shippingendtime }}</h5>-->
<!--              <p>处理描述：{{ details.handleone }}</p>-->
<!--              <div v-if="details.handleannexone" class="log-attachments">-->
<!--                <van-image-->
<!--                    v-for="(img, index) in details.handleannexone.split(',')"-->
<!--                    :key="index"-->
<!--                    width="50"-->
<!--                    height="50"-->
<!--                    :src="img"-->
<!--                    fit="cover"-->
<!--                    @click="previewImage(details.handleannexone.split(','), index)"-->
<!--                />-->
<!--              </div>-->
<!--            </van-step>-->

<!--            &lt;!&ndash; 挂单记录 &ndash;&gt;-->
<!--            <van-step v-if="details.limitone">-->
<!--              <h5>{{ details.shippingendtime }}</h5>-->
<!--              <p>挂单原因：{{ details.limitone }}</p>-->
<!--              <p>挂单状态：{{ details.limitstatus === 0 ? '挂单中' : '已取消' }}</p>-->
<!--            </van-step>-->

<!--            &lt;!&ndash; 退回记录 &ndash;&gt;-->
<!--            <van-step v-if="details.processreasonone">-->
<!--              <h5>{{ details.shippingendtime }}</h5>-->
<!--              <p>退回原因：{{ details.processreasonone }}</p>-->
<!--              <div v-if="details.processannexone" class="log-attachments">-->
<!--                <van-image-->
<!--                    v-for="(img, index) in details.processannexone.split(',')"-->
<!--                    :key="index"-->
<!--                    width="50"-->
<!--                    height="50"-->
<!--                    :src="img"-->
<!--                    fit="cover"-->
<!--                    @click="previewImage(details.processannexone.split(','), index)"-->
<!--                />-->
<!--              </div>-->
<!--            </van-step>-->
<!--          </van-steps>-->
<!--        </div>-->
<!--      </van-tab>-->
<!--    </van-tabs>-->

<!--    &lt;!&ndash; 附件展示 &ndash;&gt;-->
<!--    <div class="attachments" v-if="detail.attachments && detail.attachments.length">-->
<!--      <div class="attachment-title">附件</div>-->
<!--      <div class="attachment-list">-->
<!--        <van-image-->
<!--            v-for="(img, index) in detail.attachments"-->
<!--            :key="index"-->
<!--            width="80"-->
<!--            height="80"-->
<!--            :src="img"-->
<!--            fit="cover"-->
<!--            @click="previewImage(index)"-->
<!--        />-->
<!--      </div>-->
<!--    </div>-->


    <!-- 底部按钮 -->
    <div class="bottom-buttons">
      <van-button
          type="primary"
          block
          :disabled="detail.shippingstatus === 1 || detail.shippingstatus === 2"
          :class="{ 'button-disabled': detail.shippingstatus === 1 || detail.shippingstatus === 2 }"
          @click="handleProcess"
      >
        处理
      </van-button>

      <van-button
          type="info"
          block
          :disabled="detail.shippingstatus === 4"
          :class="{ 'button-disabled': detail.shippingstatus === 4 }"
          @click="handleTransfer"
      >
        {{ detail.shippingstatus === 4 ? '取消派单' : '派单' }}
      </van-button>

      <van-button
          type="warning"
          block
          :disabled="detail.shippingstatus === 3"
          :class="{ 'button-disabled': detail.shippingstatus === 3 }"
          @click="handleReturn"
      >
        退回
      </van-button>
    </div>
  </div>
</template>

<script>
import { NavBar, Tab, Tabs, Button, Tag, Image as VanImage } from 'vant';
import TicketView from "@/views/central/TicketView.vue";

export default {
  name: 'DetailsView',
  components: {
    TicketView,
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [VanImage.name]: VanImage,
  },
  data() {
    return {
      activeTab: 0,
      detail: {},
      details: {},
      cleaningContent: {}
    }
  },
  methods: {
    fetchCleaningContent() {
      const shippingBid = this.detail.shippingbid; // Use shippingbid from detail
      console.log(shippingBid)
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/findById?id=${shippingBid}`)
          .then(res => {
            if (res.data.code === 1) {
              this.cleaningContent = res.data.data; // Store cleaning content
            } else {
              this.$toast.fail('获取保洁内容失败: ' + res.data.message);
            }
          })
          .catch(err => {
            console.error('获取保洁内容失败:', err);
            this.$toast.fail('获取保洁内容失败');
          });
    },
  findL() {
    const id = this.$route.query.id;
    this.axios.post(`http://localhost:9999/api-central-service/shipping/findById?id=${id}`)
        .then(res => {
          if (res.data.code === 1) {
            this.details = res.data.data;
            // 格式化结束时间
            if (this.details.shippingendtime) {
              this.details.shippingendtime = this.formatTime(this.details.shippingendtime);
            }
          }
        })
        .catch(err => {
          console.error('获取工单日志失败:', err);
          this.$toast.fail('获取日志失败');
        });
  },
  findByid() {
    // 获取路由参数
    const id = this.$route.query.id;
    this.axios.post(`http://localhost:9999/api-central-service/shipping/findByIds?id=${id}`)
        .then(res => {
          if (res.data.code === 1) {
            this.detail = res.data.data;
            if (this.detail.handle) {
              this.detail.handle.handletime = this.formatTime(this.detail.handle.handletime);
            }
            if (this.detail.limitOrder) {
              this.detail.limitOrder.limittime = this.formatTime(this.detail.limitOrder.limittime);
            }
            if (this.detail.process) {
              this.detail.process.processtime = this.formatTime(this.detail.process.processtime);
            }
          }
        })
        .catch(err => {
          console.error('获取工单详情失败:', err);
          this.$toast.fail('获取工单详情失败');
        });
  },
  onClickLeft() {
    this.$router.back()
  },
  handleProcess() {
    if (this.detail.shippingstatus == 1) {
      return; // 如果已处理，直接返回
    }
    this.$toast('处理中...')
    this.$router.push({
      path: '/process',
      query: {
        id: this.$route.query.id
      }
    });
  },
  handleTransfer() {
    if (this.detail.shippingstatus == 4) {
      // 如果当前是派单状态，则取消派单
      this.axios.post('http://localhost:9999/api-central-service/shipping/update', {
        id: this.$route.query.id,
        shippingstatus: 0 // 改回原始状态
      }).then(res => {
        if (res.data.code == 1) {
          this.$toast.success('取消派单成功');
          setTimeout(() => {
            this.$router.push('/central/ticket');
          }, 1500);
        } else {
          this.$toast.fail(res.data.message || '取消派单失败');
        }
      });
    } else {
      // 正常派单流程
      this.$toast('派单中...')
      this.$router.push({
        path: '/pending',
        query: {
          id: this.$route.query.id
        }
      });
    }
  },
  handleReturn() {
    if (this.detail.shippingstatus == 3) {
      return; // 如果已退回，直接返回不执行后续代码
    }
    this.$toast('退回中...')
    this.$router.push({
      path: '/return',
      query: {
        id: this.$route.query.id
      }
    });
  },
  previewImage(images, startIndex) {
    this.$imagePreview({
      images: images,
      startPosition: startIndex
    });
  },
  // 格式化时间的辅助方法
  formatTime(time) {
    if (!time) return '';
    return new Date(time).toLocaleString();
  }
},
mounted() {
  this.findL();
  this.findByid();
  this.fetchCleaningContent();
}
}
</script>







<style scoped>
.details-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 60px;
}

.ticket-info, .content-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 20px;
}

.label {
  color: #646566;
  min-width: 90px;
  flex-shrink: 0;
}

.value {
  color: #323233;
  flex: 1;
}

.attachments {
  background: #fff;
  padding: 16px;
  margin-top: 8px;
}

.attachment-title {
  margin-bottom: 12px;
  font-weight: 500;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 8px 16px;
  background: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.bottom-buttons .van-button {
  flex: 1;
  margin: 0 4px;
}

:deep(.van-nav-bar__title) {
  color: #323233;
}

:deep(.van-nav-bar .van-icon) {
  color: #323233;
}

:deep(.van-tabs__line) {
  background-color: #1989fa;
}
.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
}

.filter-container {
  position: sticky;
  top: 46px;
  z-index: 10;
}

:deep(.van-dropdown-menu) {
  background-color: #fff;
}

.ticket-list {
  padding: 12px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

:deep(.van-button--primary) {
  background-color: #1989fa;
  border-color: #1989fa;
}

:deep(.van-button--success) {
  background-color: #07c160;
  border-color: #07c160;
}

.button-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: #969799 !important;
  border-color: #969799 !important;
}

.bottom-buttons .van-button {
  flex: 1;
  margin: 0 4px;
}

.bottom-buttons .van-button--disabled {
  background-color: #f7f8fa;
  color: #969799;
  border-color: #ebedf0;
}

.log-section {
  padding: 16px;
}

.log-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

:deep(.van-step__title) {
  font-size: 14px;
}

:deep(.van-step__circle) {
  background-color: #1989fa;
  border-color: #1989fa;
}

:deep(.van-step__line) {
  background-color: #dcdee0;
}

.van-step {
  margin-bottom: 16px;
}
</style>
